<script setup>
import { ref } from 'vue';
import Picker from '..';
import Button from '../../button/button.vue';

const columns1 = [
  '杭州',
  '宁波',
  '温州',
  '绍兴',
  '湖州',
  '嘉兴',
  '金华',
  '衢州',
];

const columns2 = [
  [
    { text: 'aaa', id: 1 },
    { text: 'bbb', disabled: true, id: 2 },
    { text: 'ccc', id: 3 },
  ],
  [
    { text: 'ddd', id: 4 },
    { text: 'eee', id: 5 },
    { text: 'fff', id: 6 },
  ],
  [
    { text: 'ggg', id: 7 },
    { text: 'hhh', id: 8 },
    { text: 'jjj', id: 9 },
  ],
];

const columns3 = [
  {
    text: '杭州',
    id: '1',
    children: [
      { text: 'aaa', id: '1-1', children: [{ text: 'iii', id: '1-1-1' }] },
      { text: 'bbb', id: '1-2', disabled: true },
      { text: 'ccc', id: '1-3', children: [{ text: 'jjj', id: '1-3-1' }] },
    ],
  },
  {
    id: '2',
    text: '宁波',
    disabled: true,
    children: [
      { text: 'ddd', disabled: false, id: '2-1' },
      { text: 'eee', id: '2-2' },
      { text: 'fff', id: '2-3' },
    ],
  },
  {
    text: '温州',
    id: '3',
    children: [
      {
        text: 'ggg',
        id: '3-1',
        children: [
          { text: 'kkk', disabled: true, id: '3-1-1' },
          { text: 'lll', id: '3-1-2' },
        ],
      },
      { text: 'hhh', id: '3-2', children: [{ text: 'mmm', id: '3-2-1' }] },
    ],
  },
];

const show1 = ref(false);
const show2 = ref(false);
const show3 = ref(false);

const list1 = ref([]);
const list2 = ref([]);
const list3 = ref(['3', '3-1', '3-1-2']);

const onClick1 = () => (show1.value = true);
const onClick2 = () => (show2.value = true);
const onClick3 = () => (show3.value = true);

const onConfirm = (val) => {
  console.log(val);
};
</script>

<template>
  <demo-block title="基础用法">
    <Button @click="onClick1">点击选择</Button>
    <Picker
      v-model="list1"
      v-model:show="show1"
      :data="columns1"
      @confirm="onConfirm"
      title="标题"
    />
  </demo-block>
  <demo-block title="多列">
    <Button @click="onClick2">点击选择</Button>
    <Picker
      v-model="list2"
      v-model:show="show2"
      value-key="id"
      :data="columns2"
      @confirm="onConfirm"
    />
  </demo-block>
  <demo-block title="级联">
    <Button @click="onClick3">点击选择</Button>
    <Picker
      v-model="list3"
      v-model:show="show3"
      :data="columns3"
      value-key="id"
      @confirm="onConfirm"
    />
  </demo-block>
</template>
